<template>
	<view class="ui-tabs" :class="[`ui-tabs--${type}`, isSticky]">
		<scroll-view
			class="ui-tabs__bar"
			:style="{
				top: stickyTop + 'rpx'
			}"
			scroll-with-animation
			scroll-x
			:scroll-left="scrollLeft"
		>
			<view
				v-for="(item, index) in list2"
				:key="index"
				:class="[
					'ui-tabs__bar-li',
					{
						active: value == item.name
					}
				]"
				@tap="change(index)"
			>
				<text
					:class="['ui-tabs__icon', 'ui-tabs__icon--prefix', item.prefixIcon]"
					v-if="item.prefixIcon"
				></text>
				<text class="ui-tabs__label">{{ item.label }}</text>
				<text
					:class="['ui-tabs__icon', 'ui-tabs__icon--suffix', item.suffixIcon]"
					v-if="item.suffixIcon"
				></text>
			</view>
		</scroll-view>
		<template v-if="bjt">
			<slot name="bjt"></slot>
		</template>
		<view class="ui-tabs__pane">
			<template v-if="type === 'swiper'">
				<swiper
					circular
					:current="current"
					@change="onChangeSwiper"
					:style="{
						height: `${swiper.height}px`
					}"
				>
					<swiper-item v-for="(item, index) in list2" :key="index">
						<view :class="[`ui-tabs__swiper-items--${index}`]">
							<slot
								name="swiper"
								:list="data"
								:item="item"
								:index="index"
								v-if="lazy ? index === current : true"
							></slot>
						</view>
					</swiper-item>
				</swiper>
			</template>

			<template v-else>
				<slot></slot>
			</template>
		</view>
	</view>
</template>

<script>
import Emitter from '../../mixins/emitter';

export default {
	componentName: 'Tabs',

	props: {
		value: [String, Number],
		beforeLeave: Function,
		labels: null,
		data: Array,
		lazy: Boolean,
		sticky: Boolean,
		stickyTop: {
			type: [Number],
			default: 0
		},
		type: {
			type: String,
			default: 'default'
		},
		bjt: {
			type: Boolean,
			default: false
		}
	},

	mixins: [Emitter],

	data() {
		return {
			list: [],
			scrollLeft: 0,
			current: 0,
			swiper: {
				height: null
			}
		};
	},
	watch: {
		value: {
			immediate: true,
			handler(val) {
				this.current = val;
			}
		}
	},

	computed: {
		list2() {
			return (this.labels || this.list).map((e, i) => {
				e.name = e.name || i;
				return e;
			});
		},

		isSticky() {
			return this.sticky ? 'ui-tabs--sticky' : '';
		}
	},

	created() {
		this.$on('tabs.addPane', data => {
			this.list.push(data);
		});
	},

	mounted() {
		this.broadcast('TabPane', 'tabs.change', this.value);
		this.doLayout();
	},

	methods: {
		onChangeSwiper(e) {
			if (e.detail.current !== this.current) {
				this.change(e.detail.current);
			}
		},

		async change(index) {
			const { name } = this.list2[index];

			let flag = true;

			if (this.beforeLeave) {
				const fn = this.beforeLeave(name);

				if (!!fn && typeof fn.then === 'function') {
					flag = !!(await fn.catch(() => null));
				} else {
					flag = fn;
				}
			}

			if (flag) {
				this.$emit('input', name);

				this.$emit('tab-change', name);
				this.broadcast('TabPane', 'tabs.change', name);
				this.scrollLeft = (index - 1) * 60;
				this.current = index;
			}

			this.doLayout();
		},

		doLayout() {
			this.$nextTick(() => {
				uni.createSelectorQuery()
					.in(this)
					.select(`.ui-tabs__swiper-items--${this.current}`)
					.boundingClientRect(res => {
						if (res) {
							this.swiper.height = res.height;
						}
					})
					.exec();
			});
		}
	}
};
</script>
